<template>
    <el-card style="height: 100%;" class="card">
        <div>
            <span style="float: left;">
                <!-- 刷新 -->
                <el-icon @click="fulsh()" class="refresh">
                    <Refresh />
                </el-icon>
                <!-- 条目数量，如果传入的值为空，则不显示 -->
                <el-tag v-if="numberOfEntries != null" type="info" style="margin-left: 10px;">
                    {{ store.appFront.numberOfEntries }}：{{ numberOfEntries }}
                </el-tag>
            </span>
            <span style="float: right;">
                <!-- 添加按钮 -->
                <el-button
                v-if="isShowAddBtn"
                 type="primary" @click="clickOfAddBtn()">
                    {{ store.appFront.add }}
                </el-button>
            </span>
        </div>
        <div :style="`height: ${bodyHeight};`" class="table-box">
            <slot></slot>
        </div>
        <!-- 分页 -->
        <el-pagination
        v-if="numberOfEntries != null && pageSize != null && pageNumber != null"
        class="pagination" layout="prev, pager, next" :total="numberOfEntries"
            :page-size="pageSize" :current-page="pageNumber" @current-change="currentChange" />
    </el-card>
</template>

<script lang="ts" setup>
import { useStore } from '@/stores/counter';
import $kt from '@/vueKantboot';
import { ref, defineEmits, defineExpose,defineProps } from 'vue';

let store = useStore();

defineProps({
    numberOfEntries: {
        type: Number,
        default: null
    },
    pageSize: {
        type: Number,
        default: null
    },
    pageNumber: {
        type: Number,
        default: null
    },
    // 是否显示添加按钮
    isShowAddBtn: {
        type: Boolean,
        default: true
    }
});

/**
 * 主体高度
 */
let bodyHeight = ref("calc(100vh - 255px)");

let getBodyHeight = () => {
    return bodyHeight;
}

let emits = defineEmits(["clickOfAddBtn", "fulsh", "currentChange"]);

/**
 * 点击添加按钮
 */
let clickOfAddBtn = () => {
    emits("clickOfAddBtn");
}

/**
 * 刷新
 */
let fulsh = () => {
    emits("fulsh");
}


let currentChange = (val: number) => {
    emits("currentChange", val);
}



defineExpose({
    clickOfAddBtn,
    fulsh
});

</script>

<style lang="scss" scoped>
.card {
    position: relative;
    height: 100%;
    box-shadow: none;
    border: 2px solid #ebeef5;
}

.title {
    color: #666666;
    text-align: center;
}

.cell-class {
    cursor: pointer;
}

.refresh:active {
    transform: rotate(45deg);
}

.no {
    color: #999999;
    text-align: center;
}

.item-title {
    text-align: center;
}

.pagination {
    position: absolute;
    text-align: center;
    bottom:10px;
    right: 30px;
}

.table-box{
    width: 100%;
    
  .el-table--scrollable-x .el-table__body-wrapper {
    z-index: 2;
  }

}
</style>